<template>
	<view class="box">
		<view class="">
			<image :src="product.photoUrl.split(',')[0]" mode=""></image>
		</view>
		
		<view class="right-box">
			<view class="">
				<view class="box-title">
					{{product.title}}
				</view>
				<view class="box-content">
					<view  v-for="(it,ind) in product.label":key="index" :style="{ 'background-image': `url(${bg})` }">
						{{it}}
					</view>
				</view>
			</view>
			
			<view class="box-fot">
				<view class="fot-left">
					<view class="left">
						<text class="le-ft">￥</text>
						<text class="le-te">{{product.price || 0}}</text>
						<text class="le-tr">￥{{product.originalPrice || 0}}   </text>
						
					</view>

				</view>
				<view class="">
					{{product.virtuals || 0}}人付款
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import config from "../utils/config";
	
	export default{
		data(){
			return{
				bg: config.topHost + '2024/12/27/f1746d5adffe4ae686843020bf90b3eb.png',
			}
		},
		props: {
			
			product: {
				type: Object,
				default: {}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.box{
		display: flex;
		margin-bottom: 24rpx;
		image{
			width: 180rpx;
			height: 180rpx;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
		}
		.right-box{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin-left: 16rpx;
			.box-title{
				// margin-top: 24rpx;
				font-weight: bold;
				font-size: 28rpx;
				color: #1A1A1A;
			}
			.box-content{
				margin-top: 6rpx;
				display: flex;
				align-items: center;
				view{
					width: 112rpx;
					height: 40rpx;
					text-align: center;
					font-size: 24rpx;
					line-height: 40rpx;
					color: #CCA566;
					background-size: 100% 100%;
					background-repeat: no-repeat;
					margin-right: 16rpx;
				}
			}
			.box-fot{
				width: 478rpx;
				margin-top: 12rpx;
				display: flex;
				align-items: flex-end;
				justify-content: space-between;
				color: #B3B3B3;
				view{
					color: #808080;
					font-size: 24rpx;
				}
				.fot-left{
					display: flex;
					align-items: flex-end;
					font-size: 24rpx;
					color: #808080;
					.left{
						display: flex;
						
					}
					.le-tr{
						margin-left: 16rpx;
						margin-top: 20rpx;
						text-decoration: line-through;
					}
					.le-ft{
						margin-top: 24rpx;
						font-size: 20rpx;
						color: #FF7C54;
					}
					.le-te{
						font-weight: bold;
						font-size: 40rpx;
						color: #FF7C54;
					}
				}
			}
		}
	}
</style>